<template>
	<div>
		<el-container>
			<el-header>
				<div class="nav">
					<div class="nav_left">
						UNI-ADMIN
					</div>
					<div class="nav_right">
						<el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
							<el-menu-item index="/">首页</el-menu-item>
							<el-menu-item index="/commodity">商品</el-menu-item>
							<el-menu-item index="/orderForm">订单</el-menu-item>
							<el-menu-item index="/vip">会员</el-menu-item>
							<el-menu-item index="/setting">设置</el-menu-item>
							<span @click="outLogin">退出登录</span>
						</el-menu>
					</div>
					<span class="outlogin" v-if="show">
						<div>修改</div>
						<div @click="del">退出</div>
					</span>
				</div>
			</el-header>
			<router-view></router-view>
		</el-container>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				activeIndex: "0",
				show : false
			}
		},
		methods: {
			outLogin() {
				this.show = true
				this.show === !this.show
			},
			handleSelect(key, keyPath) {
				console.log(key);
				this.$router.push(key);
			},
		},
		mounted() {
			// this.$axios.post('http://ceshi5.dishait.cn/admin/logout',{
			// 	token : token
			// }).then(res => {
			// 	console.log(res)
			// })
		}
	}
</script>

<style scoped>
	.el-header,
	.el-footer {
		background-color: #545C65;
		color: #fff;
		text-align: center;
		line-height: 60px;
	}

	.el-aside {
		/* background-color: #D3DCE6; */
		color: #333;
		text-align: center;
		line-height: 200px;
	}

	.el-main {
		background-color: #E9EEF3;
		color: #333;
		text-align: center;
		line-height: 160px;
	}

	body>.el-container {
		margin-bottom: 40px;
	}

	.el-container:nth-child(5) .el-aside,
	.el-container:nth-child(6) .el-aside {
		line-height: 260px;
	}

	.el-container:nth-child(7) .el-aside {
		line-height: 320px;
	}

	.nav {
		display: flex;
		width: 100%;
		justify-content: space-between;
		align-items: center;
	}

	.nav_left {
		font-size: 22px;
	}

	.nav_right {
		display: flex;
		margin-left: 30%;
	}

	.nav_right ul li {
		float: left;
		list-style: none;
	}

	.nav_right ul {}

	.el-menu-demo {
		background-color: #545C65;
		color: #fff;
	}

	.ul {
		list-style: none;
		margin-top: 90px;
	}

	.ul li {
		margin-top: -150px;
		margin-left: -30px;
	}
	
	.outlogin{
		width: 140px;
		height: 100px;
		background-color: #545C65;
		position: absolute;
		top: 70px;
		right: 10px;
	}
	
	.outlogin div {
		margin-top: -8px;
	}
</style>
